<template>
	<view class="">
		<view class="mapBox">
		  <map style="width: 100%; height: 100%;" :latitude="location.latitude" :longitude="location.longitude" :markers="markers" >
		  </map>
		</view>
		<view class="main">
			<view class="flex-y-center" @click="showEdit = true">
				<text class="font-36 text-bold m-r-10">{{deviceInfo.name}}</text>
				<image :src="$util.img('image/health/edit.png')" mode="" class="edit"></image>
			</view>
			<view class="infos flex-between">
				<view class="">
					<view class="rel font-44 text-bold m-b-10">
						{{infoDa.power_value}}{{infoDa.power_value_unit}}
						<text class="abline"></text>
					</view>
					<view class="font-24 c-78 m-b-20">剩余电量</view>
					<view>
						<text class="font-24 m-r-10">信号强度</text>
						<text class="font-24 color-title2 m-r-40">{{infoDa.signal_value}}{{infoDa.signal_value_unit}}</text>
						<text class="font-24 m-r-10">设备状态</text>
						<text class="font-24 c-bb">{{deviceInfo.online_status==1?'在线':'离线'}}</text>
					</view>
				</view>
				<image :src="$util.img('image/health/life5.png')" mode="" class="watchimg"></image>
			</view>
			<view class="options-main">
				<view class="options on" @click="delDevice()">
					删除
				</view>
			</view>
		</view>
		
		<edit-equipment-name ref="equipmentName" :show="showEdit" @close="closePop" @confirm="confirm"></edit-equipment-name>
		
	</view>
</template>

<script>
	import editEquipmentName from '../../components/editEquipmentName/editEquipmentName.vue'
	export default {
		components: {
			editEquipmentName
		},
		data() {
			return {
				profile: [],
				deviceInfo: {},
				showEdit: false,
				id: 0,
				infoDa: {
					power_value: '--',
					power_value_unit: '%',
					signal_value: '--',
					signal_value_unit: 'dBm',
				},
				scrollViewHeight: 750,
				location: {
					latitude: 34.79977,
					longitude: 113.66072
				},
				markers: [], // 用于存储地图上的标记点
			}
		},
		onLoad(data) {
			if(data.id) {
				this.id = data.id;
				this.getDetail()
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			let height = systemInfo.screenHeight; // 获取设备屏幕高度

			// 假设页面顶部有固定高度为400px的元素
			this.scrollViewHeight = height - 500; // 计算scroll-view的高度
		},
		methods: {
			closePop() {
				this.showEdit = false
			},
			confirm(e) {
				this.$api.sendRequest({
					url: "/api/userHealth/changeDeviceName",
					data: {
						id: this.id,
						name: e
					},
					success: res => {
							if(res.code == 0) {
									this.$util.showToast({title: '修改成功'});
									this.showEdit = false;
									this.$refs.equipmentName.name = '';
									this.getDetail()

							}else {
									this.$util.showToast({title: res.message});
							}
						}
						
				})
			},
			delDevice() {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该设备吗？',
				    success: function(res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							that.$api.sendRequest({
							  url: "/api/userHealth/delDevice",
							  data: {id: that.id},
							  success: res => {
										if(res.code == 0) {
												that.$util.showToast({title: '删除成功'});
												uni.navigateBack();
										}else {
												that.$util.showToast({title: res.message});
										}
									}
									
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getDeviceInfo",
			      data: {
					id: this.id,
				  },
			      success: res => {
			        if(res.code == 0) {
						this.deviceInfo = res.data;
						uni.setNavigationBarTitle({
							title: res.data.name
						});

						// 整合返回的param数据，先判断是否存在，在判断长度，如果长度为0，则不显示该模块
						let param = res.data.param;
						if(param && param.length > 0) {
							// 过滤数组里面的电量和信号强度，这两个单独赋值给额外字段数据
							for(let i = 0; i < param.length; i++) {
								if(param[i].name == '电量') {
									this.infoDa.power_value = param[i].value;
									this.infoDa.power_value_unit = param[i].unit;
								}else if(param[i].name == '信号强度') {
									this.infoDa.signal_value = param[i].value;
									this.infoDa.signal_value_unit = param[i].unit;
								}else {
									
								}
							}
						}

						// 判断是否有定位信息，如果有则显示地图
						if(res.data.pos_param) {
							// 拆分定位信息，赋值给location,以逗号拆分，并格式化为经纬度
							let location = res.data.pos_param.value.split(',');
							this.location.latitude = Number(location[1]);
							this.location.longitude = Number(location[0]);
							

							// 更新标记点信息
							this.markers = [{
								id: 0, // 标记点ID，用于唯一标识
								latitude: this.location.latitude,
								longitude: this.location.longitude,
								iconPath: '../../static/location_marker.png', // Icon图片路径
								width: 17, // Icon宽度
								height: 23, // Icon高度
								callout: {
									content: res.data.name, // 标记点上的名称
									display: 'ALWAYS', // 显示模式
									padding: 10, // 内边距
									bgColor: '#fff', // 背景颜色
									borderRadius: 5, // 边框圆角
									fontSize: 14, // 字体大小
									color: '#000', // 字体颜色
									borderWidth: 1, // 边框宽度
									borderColor: '#ccc' // 边框颜色
								}
							}];

						}


			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
	
.mapBox {
	width: 100%;
	height: 100vh;
}
.main {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 24rpx;
	box-sizing: border-box;
	.edit {
		width: 36rpx;
		height: 36rpx;
	}
	.watchimg {
		width: 191rpx;
		height: 280rpx;
	}
	.abline {
		position: absolute;
		bottom: 0;
		left: 0;
		display: inline-block;
		width: 136.85rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #03D479 0.01%, #83FEC9 109.72%);
	}
}
.options-main {
	margin: 40rpx 0 20rpx;
	.options {
			display: inline-block;
			height: 52rpx;
			width: 160rpx;
			line-height: 52rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
			margin-right: 24rpx;
			border: 1px solid $color-title2;
			color: $color-title2;
		}
		.on {
			border: 1px solid #FF2B3F;
			color: #FF2B3F!important;
		}
	
}

</style>
